
var vm;


$(function () {
    vm = new Vue({
        el: '#rrapp',
        data: {
            hp:true,
            detail:false,
            query:{startDate:'',endDate:'',type:'',cusId:''}
        },
        methods: {
            query01:function () {
                vm.reload();
            },
            //重新加载列表
            reload: function () {
                $("#jqGrid").setGridParam({
                    postData: {
                        startDate : vm.query.startDate,
                        endDate : vm.query.endDate,
                        type : vm.query.type,
                        cusId :vm.query.cusId
                    },
                    page:1,
                }).trigger("reloadGrid");
            },
            // getBzById:function (id) {
            //     vm.detail=true;
            //     // $("#hp").css("opacity","0.3");
            //     vm.hp=false;
            //     this.reloadDetail(id);
            // },
            backToList:function(){
                vm.detail=false;
                vm.hp=true;
                // $("#hp").css("opacity","1");
            },
            reloadDetail:function (id){
                $("#jqGridDetail").setGridParam({
                    postData: {
                        id:id
                    },
                    page:1
                }).trigger("reloadGrid");
            }

        }
    });

    $("#jqGrid").jqGrid({
        url: '../homePage/queryMyList',
        datatype: "json",
        colModel: [
            {label: 'id', name: 'id', key: true,hidden:true },
            {label: '客户ID', name: 'cusId', width: 20 },
            {label: '姓名', name: 'name', width: 20},
            {label: '手机号', name: 'mobile', width: 30},
            {label: '呼叫类型', name: 'type', width: 20 ,formatter:callType},
            {label: '接听时间', name: 'startTime', width: 30},
            {label: '挂机时间', name: 'endTime', width: 30},
            {label: '操作', name: 'bid', width: 20,
                formatter: function (value, options, row) {
                    if(value=="无"){
                        return '-';
                    }else{
                        return '<a class="btn btn-xs btn-primary" href="javascript:void(0);" ' +
                            'onclick="getBzById(\'' + options.rowId + '\')">查看备注</a>';
                    }
                }
            }
        ],
        viewrecords: true,
        height: 500,
        rowNum: 10,
        rowList: [10, 30, 50],
        rownumbers: true,
        rownumWidth: 25,
        autowidth: true,
        multiselect: false,
        pager: "#jqGridPager",
        jsonReader: {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames: {
            page: "page",
            rows: "limit",
            order: "order"
        },
        gridComplete: function () {
            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
        }
    });


    $("#jqGridDetail").jqGrid({
        url: '../homePage/getBzById',
        datatype: "json",
        colModel: [
            {label: 'bid', name: 'bid', key: true,hidden:true },
            {label: '备注时间', name: 'editTime', width: 30 },
            {label: '客服人员', name: 'csName', width: 20},
            {label: '备注信息', name: 'remark', width: 100}

        ],
        viewrecords: true,
        height: 500,
        rowNum: 10,
        rowList: [10, 20, 30],
        rownumbers: true,
        rownumWidth: 25,
        autowidth: true,
        multiselect: false,
        pager: "#jqGridPagerDetail",
        jsonReader: {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames: {
            page: "page",
            rows: "limit",
            order: "order"
        },
        gridComplete: function () {
            //隐藏grid底部滚动条
            $("#jqGridDetail").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
            $("#jqGridDetail").jqGrid("setGridWidth",$(window).width())
        }
    });


});

function getBzById(id) {
    vm.detail=true;
    vm.hp=false;
    vm.reloadDetail(id);
};